<template>
  <el-table ref="table" :size="size" :stripe="stripe" :data="tableData" @selection-change="(select)=>$emit('selectionChange',select)"
    :border="border">
    <el-table-column type="selection" width="55" align="center" v-if="select" />
    <el-table-column type="index" width="55" align="center" label="索引" v-if="index" />
    <template v-for="(filed,index) in fileds">
      <el-table-column :label="filed.label" v-if="!filed.custom" :key="index" :prop="filed.prop" align="center">
      </el-table-column>
      <el-table-column :label="filed.label" v-else align="center" :key="index">
        <template slot-scope="{row}">
          <!-- 对外提供插槽方便父组件自定义内容 -->
          <slot :row="row" :name="filed.prop"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  name: 'senior-tables',
  props: {
    /**
     * 表格字段
     * label 展示的文本
     * prop 数据
     */
    fileds: {
      required: true,
      type: Array,
      default: () => []
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },

    // 是否显示全选
    select: {
      type: Boolean,
      default: true
    },

    // 是否显示索引
    index: {
      type: Boolean,
      default: true
    },

    // 表格大小 medium / small / mini
    size: {
      type: String,
      default: 'medium'
    },

    // 是否为斑马纹
    stripe: {
      type: Boolean,
      default: true
    },

    // 是否带有纵向边框
    border: {
      type: Boolean,
      default: true
    },


  },
}
</script>

<style>
/* 表格边框对齐 */
body .el-table th.gutter {
  display: table-cell !important;
}
</style>
